import { useState } from 'react'
import './index.less'
import { Button, Checkbox } from 'antd'
import { check } from 'prettier'

export default (props) => {
    const { todos, checkAll ,clearDone} = props
    // 统计已完成的任务数
    const doneCount = todos.reduce((pre, cur) => pre + (cur.done ? 1 : 0), 0)
    const allCount = todos.reduce((pre, cur) => pre + 1, 0)
    const onChangeAll = (e) => {
        checkAll(e.target.checked)
    }

    const handleClearDone = () => {
        clearDone()
    }
    return (
        <>
            <div className="todo-footer">

                <Checkbox checked={doneCount === allCount && allCount != 0 ? true : false} onChange={onChangeAll}>一键全部完成</Checkbox>

                <Button onClick={handleClearDone} type="primary" danger shape='round' size='small'>删除已完成</Button>
                
            </div>
            
            <div className='countDone'>
                已完成任务数：{doneCount}/{allCount}
            </div>
            <div className="countAll">
                待完成任务数：{allCount - doneCount}
            </div>
        </>
    )
}